<div class="ngm-density__compact flex flex-col items-stretch">
  <div class="flex justify-between items-center mx-2">
    <label class="p-1 shrink-0 text-sm text-ellipsis whitespace-nowrap overflow-hidden">{{ label }}</label>

    <span class="flex-1"></span>

    <button *ngIf="value" mat-icon-button displayDensity="compact" [disabled]="!value" (click)="swapColors($event)">
      <mat-icon class="m-0" style="margin: 0;">swap_horiz</mat-icon>
    </button>

    <div class="flex justify-center items-center overflow-hidden" [@listEnterAnimation]="value">
      <div *ngFor="let color of value" class="w-4 h-4"
          [style.background-color]="color"
      ></div>
    </div>
  </div>

  <div class="relative flex items-center mx-1">
    <input
      matInput
      class="ngm-input-element ngm-w-full"
      type="text"
      [placeholder]="placeholder"
      [disabled]="disabled"
      [matAutocomplete]="auto"
      #acTrigger="matAutocompleteTrigger"
      [ngModel]="value"
      (ngModelChange)="onChange($event)"
      (blur)="onBlur($event, acTrigger);"
    />

    <button *ngIf="value" class="ngm-colors__clear right-0" mat-icon-button displayDensity="compact" (click)="clear()">
      <mat-icon>close</mat-icon>
    </button>
  </div>

</div>

<mat-autocomplete
  autoActiveFirstOption
  #auto="matAutocomplete"
  class="ngm-select-panel ngm-density__compact"
  (optionSelected)="onOptionSelected($event)"
>
  <mat-option [value]="null">--</mat-option>
  <mat-optgroup *ngFor="let group of options" [label]="group.label">
    <mat-option *ngFor="let color of group.colors" [value]="color.colors">
      <div class="flex justify-start items-center">
        <div *ngFor="let color of color.colors" class="w-4 h-4"
            [style.background-color]="color"
        ></div>
      </div>
    </mat-option>
  </mat-optgroup>
</mat-autocomplete>
